<template>
  <view>
    <view
      class="fixed width-100vw bgc-f7f4fc fd-row color-1a fs-44 fw-700"
      :style="{
        padding: `${menuButton.top}px calc(100% - ${menuButton.left}px) 15px 30rpx`,
      }"
    >
      <label
        :style="{
          height: `${menuButton.height}px`,
        }"
        class="bgc-fff ai-center f1 br-36 mr-30"
      >
        <image
          class="width-30 height-30 pl-14"
          src="/static/imgs/icon-search0.png"
        />
        <input
          class="pt-12 pb-12 f1 pl-14 pr-14 fs-28"
          placeholder="请输入社区名称"
          confirm-type="search"
          v-model="searchContent"
          @confirm="resetData"
          placeholder-class="color-8f9aa8 fs-24"
        />
      </label>
    </view>

    <view :style="{ height: `${menuButton.top + menuButton.height + 15}px` }" />

    <view
      v-for="(item, index) in community.lists"
      :key="index"
      @click="goto(index)"
      class="section fd-row bgc-fff mb-24 ml-30 mr-30"
    >
      <image class="img-community br-8" :src="item.avatar" mode="aspectFill" />
      <view class="subject f1 ml-20">
        <text class="title fs-28 color-333 fw-700">{{ item.name }}</text>
        <view class="fd-row mt-16 fw-500">
          <view class="mr-10 fs-22 fd-row ai-baseline">
            <text class="color-8f9aa8">关注</text>
            <text class="color-333 ml-6 mr-6">
              {{ item.rssNum }}
            </text>
            <text class="color-8f9aa8">人</text>
          </view>
          <view class="ml-10 fs-24 fd-row ai-baseline">
            <text class="color-8f9aa8">浏览</text>
            <text class="color-333 ml-6 mr-6">
              {{ item.scanNum }}
            </text>
            <text class="color-8f9aa8">次</text>
          </view>
        </view>
      </view>
      <view class="jc-sb ai-end">
        <text class="fs-22 color-8f9aa8">{{ item.km }}km</text>
        <view v-if="item.isRss" class="fd-row ai-center">
          <image class="width-24 height-18" src="/static/imgs/icon-hook.png" />
          <text class="fs-26 color-333 ml-6">已关注</text>
        </view>
        <view
          v-else
          @click.stop="subscription(index)"
          class="subscription color-fff fs-26 bgc-eb"
        >
          + 关注
        </view>
      </view>
    </view>

    <label v-if="tips.isShow" class="ai-center jc-center">
      <image
        v-if="tips.showIcon"
        class="width-46 height-46"
        src="/static/imgs/icon-loading.gif"
        mode="aspectFill"
      />
      <text class="color-666 fs-28 ml-18">{{ tips.text }}</text>
    </label>
  </view>
</template>

<script>
  let requestFlag = false;

  export default {
    data: () => ({
      searchContent: "",
      community: { lists: [], page: 1 },
      tips: {
        isShow: true,
        showIcon: true,
        text: "加载中...",
      },
      location: [],
      menuButton: uni.getMenuButtonBoundingClientRect(),
    }),
    onShareAppMessage() {
      return {
        title: "我附近的社区",
        path: "/pages/nearbyCommunities",
      };
    },
    onShareTimeline() {
      return {
        title: "我附近的社区",
        path: "/pages/nearbyCommunities",
      };
    },
    onPullDownRefresh() {
      this.resetData();
    },
    onReachBottom() {
      this.getData();
    },
    onShow() {
      uni.getLocation({
        success: ({ latitude, longitude }) => {
          this.location = [latitude, longitude];
          this.resetData();
        },
        fail: () =>
          uni.showToast({
            title: "获取位置信息失败, 请允许相关权限后重试",
            icon: "none",
          }),
      });
    },
    methods: {
      resetData() {
        this.community.page = 1;
        this.community.lists = [];
        this.getData();
      },
      goto(index) {
        let item = this.community.lists[index];
        item.msgNum = 0;
        uni.navigateTo({ url: `/pages/postBar?id=${item.bid}` });
      },
      getData() {
        const { community, location, searchContent: keyword } = this;
        if (requestFlag || !community.page) return;
        this.tips = {
          isShow: true,
          showIcon: true,
          text: "加载中...",
        };
        uni.fetch("/api/login/nearby_community", {
          data: {
            latitude: location[0],
            longitude: location[1],
            keyword,
            page: community.page,
          },
          success: (res) => {
            community.page = res.page;
            this.tips.isShow = !res.lists?.length;
            community.lists.push(...(res.lists || []));
            if (!res.lists?.length) {
              this.tips.showIcon = false;
              this.tips.text = "暂未搜索到更多内容";
            }
          },
          complete() {
            requestFlag = false;
            uni.stopPullDownRefresh();
          },
        });
      },
      subscription(index) {
        uni.fetch("/api/bbs/rss", {
          data: { bid: this.community.lists[index].bid },
          success: (res) => (this.community.lists[index].isRss = true),
        });
      },
    },
  };
</script>

<style scoped>
  .header {
    z-index: 9;
  }
  .navigate-bar {
    height: 60px;
  }
  .icon {
    width: 114rpx;
    height: 114rpx;
  }

  .section {
    box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
    border-radius: 10rpx;
    padding: 15rpx;
  }

  .img-community {
    width: 130rpx;
    height: 130rpx;
  }

  .mark {
    width: 44rpx;
    height: 44rpx;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 24rpx;
    background: #fc5260;
    box-shadow: 0 3rpx 8rpx 0 rgba(252, 82, 96, 0.22);
    border-radius: 50%;
  }

  .subscription {
    padding: 6rpx 22rpx;
    background: linear-gradient(90deg, #8ec5fc, #4388e7);
    border-radius: 25rpx;
  }
</style>